/**
 * Created by xlt on 2017/6/4.
 */
import React from "react";
import {connect} from "react-redux";
import {Link} from "react-router";
import {fetchPosts, reset} from "../../actions";
import ServiceMenu from "../../components/ServiceMenu";
import {Color} from "../../utils/baseColor";
import {Constant} from "../../utils/BaseConstant";
import cookie from "react-cookie";
class me extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            checkbox: "",
            userRight: 0
        }
    }

    componentWillMount() {
        document.title = "我";
    }

    componentDidMount() {
        const header = {"X-Client-ID": "123456"};
        this.props.dispatch(reset("mineInfo"));
        this.props.dispatch(fetchPosts("mineInfo", header, {openId: cookie.load("openId")}));
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.MineInfo.errorCode == 0) {
            let mineInfo = nextProps.MineInfo;
            let userRight = mineInfo.data.userRight;
            this.setState({
                checkbox: (mineInfo.data.noticeSwitch == 1 ? "checked" : ""),
                userRight: userRight
            });
            cookie.save("userRight", userRight);
            this.renderMe();
        }
    }

    displayOnAdmin() {
        if (this.state.userRight == Constant.BOSS) {
            return (
                <span> 管理员、</span>
            )
        }
    }

    renderMe() {
        if (this.state.userRight == Constant.ADMIN || this.state.userRight == Constant.BOSS) {
            return (
                <div>
                    <div className="me-order">
                        <ul>
                            <li>
                                <Link to={"pay/managementStaff"}>管理员工<span
                                    className="me-span">添加店铺收银员、{this.displayOnAdmin()}财务人员等</span></Link>
                            </li>
                        </ul>
                    </div>
                    <div className="me-order">
                        <ul>
                            <li>
                                <Link onClick={this._queryOrders.bind(this)}>查询导出订单</Link>
                            </li>
                        </ul>
                    </div>
                    <div className="me-operation-last-up">
                        <ul>
                            <li>
                                <Link onClick={this.receivables.bind(this)}>收款二维码</Link>
                            </li>
                        </ul>
                    </div>
                    <div className="me-operation-last">
                        <ul>
                            <li>
                                <Link>
                                    收款到账通知
                                </Link>
                                <div className="me-checkBox-div">
                                    <input className="mui-switch mui-switch-checkbox" type="checkbox"
                                           checked={this.state.checkbox} onClick={this.checkOnClick.bind(this)}/>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            )
        } else if (this.state.userRight == Constant.ACCOUNTANT) {
            return (
                <div>
                    <div className="me-order">
                        <ul>
                            <li>
                                <Link onClick={this._queryOrders.bind(this)}>查询导出订单</Link>
                            </li>
                        </ul>
                    </div>
                </div>
            );
        } else if (this.state.userRight == Constant.CASHIER) {
            return (
                <div>
                    <div className="me-operation-last-up">
                        <ul>
                            <li>
                                <Link onClick={this.receivables.bind(this)}>收款二维码</Link>
                            </li>
                        </ul>
                    </div>
                    <div className="me-operation-last">
                        <ul>
                            <li>
                                <Link>
                                    收款到账通知
                                </Link>
                                <div className="me-checkBox-div">
                                    <input className="mui-switch mui-switch-checkbox" type="checkbox"
                                           checked={this.state.checkbox} onClick={this.checkOnClick.bind(this)}/>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            );
        }
    }


    checkOnClick() {
        if (this.state.checkbox == "checked") {
            this.setState({checkbox: ""});
        } else {
            this.setState({checkbox: "checked"});
        }
        const header = {"X-Client-ID": "123456"};
        this.props.dispatch(reset("mineInfo"));
        this.props.dispatch(fetchPosts("updateNoticeSwitchStatus", header, {openId: cookie.load("openId")}));
        this.props.dispatch(reset("updateNoticeSwitchStatus"));
    }

    receivables() {
        window.location.href = "/#/pay/quickResponseCode?qrCodeType=2";
    }

    _queryOrders() {
        window.location.href = "/#pay/selectDate";
    }

    render() {
        if (this.state.isLoading) {
            return (
                <div className="loading"><span>loading</span></div>
            );
        } else {
            return (
                <div style={{height: (window.screen.height), background: Color.BACKGROUND_COLOR}}>
                    {this.renderMe()}
                    <ServiceMenu/>
                </div>
            );
        }
    }

}

function mapStateToProps(state) {
    const {postsByApi} = state;
    const {
        isFetching,
        items: MineInfo
    } = postsByApi["mineInfo"] || {
        isFetching: false,
        items: {}
    };
    const {
        items: UpdateNoticeSwitchStatus
    } = postsByApi["updateNoticeSwitchStatus"] || {
        items: {}
    };
    return {
        isFetching,
        MineInfo,
        UpdateNoticeSwitchStatus
    };
}

export default connect(mapStateToProps)(me);